<template>
<div class="content" :style='{"minHeight":"100vh","padding":"30px","background":"url(http://codegen.caihongy.cn/20230228/47752d6be3a94e8892a83ec2a70c8443.png) no-repeat center top /100% 100%"}'>
	<div class="text" :style='{"margin":"50px auto","fontSize":"34px","color":"#012c7a","textAlign":"center","fontWeight":"bold"}'>欢迎使用 {{this.$project.projectName}}</div>
    <div class="cardView">
        <div class="cards" :style='{"margin":"0 0 20px 0","alignItems":"center","justifyContent":"center","display":"flex"}'>
			<div :style='{"border":"0px solid #ccc","boxShadow":"0 0px 0px rgba(0,0,0,.3)","margin":"0 10px","borderRadius":"4px","display":"flex"}' v-if="isAuth('canjiakecheng','首页总数')">
				<div :style='{"width":"160px","borderRadius":"5px 0px 0px 5px","background":"#1b5a90","height":"120px"}'></div>
				<div :style='{"alignItems":"center","borderRadius":"0 5px 5px 0","flexDirection":"column","background":"#fff","display":"flex","width":"180px","justifyContent":"center"}'>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"30px","color":"#333","fontWeight":"bold","height":"24px"}'>{{canjiakechengCount}}</div>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"16px","color":"#666","height":"24px"}'>参加课程总数</div>
				</div>
			</div>
			<div :style='{"border":"0px solid #ccc","boxShadow":"0 0px 0px rgba(0,0,0,.3)","margin":"0 10px","borderRadius":"4px","display":"flex"}' v-if="isAuth('banjixuesheng','首页总数')">
				<div :style='{"width":"160px","borderRadius":"5px 0px 0px 5px","background":"#1b5a90","height":"120px"}'></div>
				<div :style='{"alignItems":"center","borderRadius":"0 5px 5px 0","flexDirection":"column","background":"#fff","display":"flex","width":"180px","justifyContent":"center"}'>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"30px","color":"#333","fontWeight":"bold","height":"24px"}'>{{banjixueshengCount}}</div>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"16px","color":"#666","height":"24px"}'>班级学生总数</div>
				</div>
			</div>
			<div :style='{"border":"0px solid #ccc","boxShadow":"0 0px 0px rgba(0,0,0,.3)","margin":"0 10px","borderRadius":"4px","display":"flex"}' v-if="isAuth('xuexijilu','首页总数')">
				<div :style='{"width":"160px","borderRadius":"5px 0px 0px 5px","background":"#1b5a90","height":"120px"}'></div>
				<div :style='{"alignItems":"center","borderRadius":"0 5px 5px 0","flexDirection":"column","background":"#fff","display":"flex","width":"180px","justifyContent":"center"}'>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"30px","color":"#333","fontWeight":"bold","height":"24px"}'>{{xuexijiluCount}}</div>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"16px","color":"#666","height":"24px"}'>学习记录总数</div>
				</div>
			</div>
        </div>
        <div style="display: flex;align-items: center;width: 100%;margin-bottom: 10px;">
            <el-card style="width: 25%;margin: 0 10px;" v-if="isAuth('canjiakecheng','首页统计')">
                <div id="canjiakechengChart1" style="width:100%;height:400px;"></div>
            </el-card>
            <el-card style="width: 25%;margin: 0 10px;" v-if="isAuth('canjiakecheng','首页统计')">
                <div id="canjiakechengChart2" style="width:100%;height:400px;"></div>
            </el-card>
            <el-card style="width: 25%;margin: 0 10px;" v-if="isAuth('banjixuesheng','首页统计')">
                <div id="banjixueshengChart1" style="width:100%;height:400px;"></div>
            </el-card>
            <el-card style="width: 25%;margin: 0 10px;" v-if="isAuth('xuexijilu','首页统计')">
                <div id="xuexijiluChart1" style="width:100%;height:400px;"></div>
            </el-card>
        </div>
    </div>
</div>
</template>
<script>
//4
import router from '@/router/router-static'
import * as echarts from 'echarts'
export default {
	data() {
		return {
            canjiakechengCount: 0,
            banjixueshengCount: 0,
            xuexijiluCount: 0,
		};
	},
  mounted(){
    this.init();
    this.getcanjiakechengCount();
    this.canjiakechengChat1();
    this.canjiakechengChat2();
    this.getbanjixueshengCount();
    this.banjixueshengChat1();
    this.getxuexijiluCount();
    this.xuexijiluChat1();
  },
  methods:{
    init(){
        if(this.$storage.get('Token')){
        this.$http({
            url: `${this.$storage.get('sessionTable')}/session`,
            method: "get"
        }).then(({ data }) => {
            if (data && data.code != 0) {
            router.push({ name: 'login' })
            }
        });
        }else{
            router.push({ name: 'login' })
        }
    },
    getcanjiakechengCount() {
        this.$http({
            url: `canjiakecheng/count`,
            method: "get"
        }).then(({
            data
        }) => {
            if (data && data.code == 0) {
                this.canjiakechengCount = data.data
            }
        })
    },

    canjiakechengChat1() {
      this.$nextTick(()=>{

        var canjiakechengChart1 = echarts.init(document.getElementById("canjiakechengChart1"),'vintage');
        this.$http({
            url: "canjiakecheng/group/kechengmingcheng",
            method: "get",
        }).then(({ data }) => {
            if (data && data.code === 0) {
                let res = data.data;
                let xAxis = [];
                let yAxis = [];
                let pArray = []
                for(let i=0;i<res.length;i++){
                    xAxis.push(res[i].kechengmingcheng);
                    yAxis.push(parseFloat((res[i].total)));
                    pArray.push({
                        value: parseFloat((res[i].total)),
                        name: res[i].kechengmingcheng
                    })
                }
                var option = {};
                option = {
                    title: {
                        text: '课程参加人数统计',
                        left: 'center'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAxis,
                        type: 'line',
                        areaStyle: {}
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                canjiakechengChart1.setOption(option);
                  //根据窗口的大小变动图表
                window.onresize = function() {
                    canjiakechengChart1.resize();
                };
            }
        });
      })
    },

    canjiakechengChat2() {
      this.$nextTick(()=>{

        var canjiakechengChart2 = echarts.init(document.getElementById("canjiakechengChart2"),'vintage');
        this.$http({
            url: "canjiakecheng/group/kechengleixing",
            method: "get",
        }).then(({ data }) => {
            if (data && data.code === 0) {
                let res = data.data;
                let xAxis = [];
                let yAxis = [];
                let pArray = []
                for(let i=0;i<res.length;i++){
                    xAxis.push(res[i].kechengleixing);
                    yAxis.push(parseFloat((res[i].total)));
                    pArray.push({
                        value: parseFloat((res[i].total)),
                        name: res[i].kechengleixing
                    })
                }
                var option = {};
                option = {
                    title: {
                        text: '课程类型参加人数统计',
                        left: 'center'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAxis,
                        type: 'bar'
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                canjiakechengChart2.setOption(option);
                  //根据窗口的大小变动图表
                window.onresize = function() {
                    canjiakechengChart2.resize();
                };
            }
        });
      })
    },





    getbanjixueshengCount() {
        this.$http({
            url: `banjixuesheng/count`,
            method: "get"
        }).then(({
            data
        }) => {
            if (data && data.code == 0) {
                this.banjixueshengCount = data.data
            }
        })
    },

    banjixueshengChat1() {
      this.$nextTick(()=>{

        var banjixueshengChart1 = echarts.init(document.getElementById("banjixueshengChart1"),'roma');
        this.$http({
            url: "banjixuesheng/group/banjimingcheng",
            method: "get",
        }).then(({ data }) => {
            if (data && data.code === 0) {
                let res = data.data;
                let xAxis = [];
                let yAxis = [];
                let pArray = []
                for(let i=0;i<res.length;i++){
                    xAxis.push(res[i].banjimingcheng);
                    yAxis.push(parseFloat((res[i].total)));
                    pArray.push({
                        value: parseFloat((res[i].total)),
                        name: res[i].banjimingcheng
                    })
                }
                var option = {};
                option = {
                    title: {
                        text: '班级人数统计',
                        left: 'center'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: xAxis
                    },
                    series: [{
                        data: yAxis,
                        type: 'bar'
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                banjixueshengChart1.setOption(option);
                  //根据窗口的大小变动图表
                window.onresize = function() {
                    banjixueshengChart1.resize();
                };
            }
        });
      })
    },






    getxuexijiluCount() {
        this.$http({
            url: `xuexijilu/count`,
            method: "get"
        }).then(({
            data
        }) => {
            if (data && data.code == 0) {
                this.xuexijiluCount = data.data
            }
        })
    },

    xuexijiluChat1() {
      this.$nextTick(()=>{
        //  xuexishizhang
        // xingming xingming

        var xuexijiluChart1 = echarts.init(document.getElementById("xuexijiluChart1"),'roma');
        this.$http({
            url: `xuexijilu/value/xingming/xuexishizhang`,
            method: "get",
        }).then(({ data }) => {
            if (data && data.code === 0) {
                let res = data.data;
                let xAxis = [];
                let yAxis = [];
                let pArray = []
                for(let i=0;i<res.length;i++){
                    xAxis.push(res[i].xingming);
                    yAxis.push(parseFloat((res[i].total)));
                    pArray.push({
                        value: parseFloat((res[i].total)),
                        name: res[i].xingming
                    })
                }
                var option = {};
                option = {
                    title: {
                        text: '学时时长分析',
                        left: 'center'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAxis,
                        type: 'line',
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                xuexijiluChart1.setOption(option);
                  //根据窗口的大小变动图表
                window.onresize = function() {
                    xuexijiluChart1.resize();
                };
            }
        });
      })
    },






  }
};
</script>
<style lang="scss" scoped>
    .cardView {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .cards {
            display: flex;
            align-items: center;
            width: 100%;
            margin-bottom: 10px;
            justify-content: center;
            .card {
                width: calc(25% - 20px);
                margin: 0 10px;
                /deep/.el-card__body{
                    padding: 0;
                }
            }
        }
    }
</style>
